<template>
	<div class="box"></div>
	<div class="city">
		<div class="city-list" v-for="(item,index) in Citylist">
			<div class="nav" v-for="(item,index) in item.Citylist1">
				<a href="javascript:void(0)" @click="num=index">
					{{item.city}}
				</a>
			</div>
		</div>
	</div>
	<div class="list-item" v-if="num==0" v-for="(item,index) in Citylist">
		<div v-for="(item,index) in item.Citylist2">
			{{item.city}}
		</div>
	</div>
	<div class="list-item" v-if="num==1" v-for="(item,index) in Citylist">
		<div v-for="(item,index) in item.Citylist3">
			{{item.city}}
		</div>
	</div>
	<div class="list-item" v-if="num==2" v-for="(item,index) in Citylist">
		<div v-for="(item,index) in item.Citylist4">
			{{item.city}}
		</div>
	</div>
	<div class="list-item" v-if="num==3" v-for="(item,index) in Citylist">
		<div v-for="(item,index) in item.Citylist5">
			{{item.city}}
		</div>
	</div>
</template>

<script>
	export default {
		props: ['Citylist'],
		data() {
			return {
				num: 0
			}
		},
	}
</script>

<style scoped>
	.box{
		height: 20px;
		background-color: #CCCCCC;
	}
	.city {
		width: 100%;
		overflow: hidden;
		margin-top: 0.3rem;
	}

	.city-list {
		display: flex;
		margin-top: 0.3rem;
		margin-bottom: 0.3rem;
		padding-bottom: 0.2rem;
		border-bottom: 1px solid #cccccc;
	}

	.nav {
		flex: 1;
		font-size: 0.3rem;
		text-align: center;
	}

	.nav a {
		color: black;
	}

	.nav a:hover {
		color: #32CD32;
		border-bottom: 2px solid #32CD32;
	}

	.list-item {
		background-color: white;
		color: #cccccc;
		position: relative;
		overflow: hidden;
		margin-top: 0.2rem;
	}

	.list-item div {
		width: 20%;
		height: 0.8rem;
		text-align: center;
		line-height: 0.8rem;
		float: left;
		border: 1px solid #cccccc;
		margin: 0.15rem 0.15rem;
		border-radius: 8px;
		font-size: 0.28rem;
		color: #cccccc;
	}
</style>
